<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/adminlte/bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap-table/bootstrap-table.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/adminlte/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/bootstrap-table/bootstrap-table.js"></script>
    <script src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!--<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>-->
    <!--<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>-->
    <title>数据表</title>
    <style>
    </style>
</head>
<body>
<div id="toolbox">
    <button class="btn" ><span class="glyphicon glyphicon-plus"></span> 新增</button>
    <button class="btn" id="edit_table_btn"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>
    <button class="btn"><span class="glyphicon glyphicon-remove"></span> 删除</button>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑商品类信息</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal">
                    <div class="form-group">
                        <input type="hidden" class="form-control" disabled="disabled" id="modal_id">
                        <label for="" class="col-sm-2 control-label">商品类ID</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" disabled="disabled" id="modal_bj_no">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">商品类名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modal_cus_name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modal_bj_prd">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label for="" class="col-sm-2 control-label" >单价</label>-->
<!--                        <div class="col-sm-9">-->
<!--                            <input type="text" class="form-control" id="modal_up">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label for="" class="col-sm-2 control-label" >模具成本</label>-->
<!--                        <div class="col-sm-9">-->
<!--                            <input type="text" class="form-control" id="modal_mj_cst">-->
<!--                        </div>-->
<!--                    </div>-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="sava-edit-btn">保存</button>
            </div>
        </div>
    </div>
</div>


<table id="mytable"></table>
</body>
<script>
    var $table = $("#mytable");
    var index= '';
    $table.bootstrapTable({
        //url:"https://examples.wenzhixin.net.cn/examples/bootstrap_table/data",
        url: '/product/product_listtest',
        method:'get',
        dataField:"products",
        sortable: true,
        search: true,
        pagination: 'true',  //开启分页
        pageSize: 5,
        pageList: [10, 10, 10, 10],
        toolbar: "#toolbox",
        singleSelect: true,
        showColumns: true,
        clickToSelect: true,
        showRefresh: true,

        //下面onClickRow为点击该行的时候获取到该行的行号; 在外边设置index,当点击某一行的时候，再改写该值。
        onClickRow:function(row,$e){
            index = $e.data('index');
        },
        sidePagination:'server', //分页处理  ？？
        idField:'pId',
        columns: [{checkbox: true}, {
            title: 'ID',
            field: 'pId',
            visible: false,
            sortable: true,
            width: 10
        }, /*{
            //这一段为为一行增加序号，但是在getSelections里面获取不到值，尽管有设置field:'index'。
            field:'index',
            title:'序号',
            formatter:function (value, row, index) {
                        var options = $table.bootstrapTable('getOptions');
                        return options.pageSize * (options.pageNumber - 1) + index + 1;}
        },*/
        {
            title: '商品名称',
            field: 'productName',
            width: 10,
            align: 'center',
            sortable: true
        },
            {
                title: '商品价格',
                field: 'money',
                width: 10,
                align: 'center',
                sortable: true
            },
            {
                title: '商品描述',
                field: 'content',
                width: 10,
                align: 'center',
                sortable: true
            },
            {
            title:'商品图片' ,
            field:'productPic',
            width:50,
            align:'center',
            formatter:function (value, row, index, field) {
                var str="";
                str= "<img style=\"height: 50px;width: 50px;\" src=\""+value+"\"/>";
                return '<img src=/myFile/'+value+' width="50" height="50" class="img-rounded">';
            }
        },
            {
                title: '商品库存',
                field: 'num',
                width: 10,
                align: 'center',
                sortable: true
            },
            {
                title: '商品打折',
                field: 'dazhe',
                width: 10,
                align: 'center',
                sortable: true
            },
        ],
    });
    var $editbtn = $("#edit_table_btn");
    $(function () {
        $editbtn.click(function () {
            var dictionaries = $table.bootstrapTable('getSelections')[0];
            if(dictionaries.length==2){
                alert("请选择数据");
            }else{
                //$("#modal_id").val(dictionaries.dId)
                $("#modal_bj_no").val(dictionaries.dId)
                $("#modal_cus_name").val(dictionaries.name)
                $("#modal_bj_prd").val(dictionaries.path)
                $("#myModal").modal();
            }
        });
        //关闭模态框数据保存到table
        $("#sava-edit-btn").click(function () {
            $('#myModal').modal('hide');
            //var id = $("#modal_id").val();
            var new_cus_name = $("#modal_cus_name").val();
            var new_bj_prd = $("#modal_bj_prd").val();
            // var new_up = $("#modal_up").val();
            // var new_mj_cst = $("#modal_mj_cst").val();

            $table.bootstrapTable("updateRow",{
                index:index,
                url:"",
                row:{
                    //id:id,
                    cus_name:new_cus_name,
                    bj_prd:new_bj_prd,
                   // up:new_up,
                  //  mj_cst:new_mj_cst
                }
            });
        })
    })
</script>
</html>